<template>
    <div class="stp">
        <el-form :model="stp2Form" status-icon :rules="stp2rules" ref="stp2Form" label-width="64px" size="medium">
            <el-form-item label="手机号:" prop="tel">
                <el-input type="tel" v-model="stp2Form.tel" auto-complete="off" placeholder="请输入手机号码"
                          :maxlength="11"></el-input>
            </el-form-item>
            <el-form-item label="验证码:" prop="code">
                <el-input v-model="stp2Form.code" auto-complete="off"
                          placeholder="请输入验证码"></el-input>
                <button class="needClick" v-if="cuontTime >= 30" v-text="needClick" @click="contTime"></button>
                <button v-else v-text="cuontTimeText"></button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('stp2Form')">下一步</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    const reg = /^0?1[3|4|5|8|7][0-9]\d{8}$/;
    let verifycode = "1234";
    export default {
        data() {
            let checkTel = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入电话号码'));
                } else if (value.length > 0 && value.length !== 11 || !reg.test(value)) {
                    callback(new Error('请输入正确的手机号码'));
                } else {
                    callback();
                    this.$refs.stp2Form.validateField('code',function(valid){
                        if(!valid){
                            alert("submit");
                        }
                    });
                }
            };
            let checkCode = (rule, value, callback) => {
                if (value.length > 0 && value.toLocaleLowerCase() !== verifycode.toLocaleLowerCase()) {
                    callback(new Error('请输入正确的验证码'));
                } else if(value.toLocaleLowerCase() === verifycode.toLocaleLowerCase()) {
                    callback();
                    location.href = "#/setnewpass";
                }
            };
            return {
                needClick: '获取验证码',
                cuontTime: 30,
                cuontTimeText: "30s后重新获取",
                stp2Form: {
                    imgCode:'',
                    tel: '',
                    code: ''
                },
                stp2rules: {
                    tel: [
                        {validator: checkTel, trigger: 'blur'}
                    ],
                    code: [
                        {validator: checkCode, trigger: 'blur'}
                    ]
                }
            };
        },
        methods: {
            submitForm() {
                this.$refs.stp2Form.validateField('tel');
            },
            contTime() {
                let self = this;
                let num = setInterval(function () {
                    self.cuontTime = --self.cuontTime;
                    self.cuontTimeText = `${self.cuontTime}s后重新获取`;
                    if (self.cuontTime < 0) {
                        self.cuontTime = 30;
                        clearInterval(num);
                    }
                }, 1000)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .stp{
        .el-form-item:nth-child(2){
            width: 230px;
            margin-right:10px;
            position: relative;
            button {
                width: 98px;
                border: 1px solid #dfdfdf;
                position: absolute;
                margin: auto;
                top:0;
                bottom: 0;
                left: auto;
                right: -110px;
                font-size: 13px;
                color: #999;
                padding: 5px 0;
                background-color: #fff;
                &.needClick {
                    cursor: pointer;
                    color: #ff6235;
                }

            }
        }

    }
</style>
